<template>
    <div class="rating-success">
        <wp-icon
            class="icon"
            name="success"
            :size="70" />
        <div class="title">
            {{$t('Evaluation_success')}}
        </div>
        <div class="content">
            {{$t('Thanks_for_your_Evaluation')}}
        </div>
        <div class="container-button">
            <van-button
                class="button"
                round
                type="default"
                @click="goto('maitenanceorderdetail', { repairId: repairId})">{{$st('wp_View_Reviews')}}</van-button>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router';
import WpIcon from '@/components/_wp_components/WpIcon.vue';
export default {
    components: { WpIcon },
    props: {
        repairId: String
    },
    setup () {
        const router = useRouter();
        const goto = (page, params) => {
            router.push({
                replace: true,
                name: page,
                params
            });
        };
        return {
            goto
        };
    }
};
</script>

<style lang="scss" scoped>
.rating-success{
    display: flex;
    flex-flow: column;
    align-items: center;
    .icon{
        margin-top: 50px;
    }
    .title{
         font-size: 17px;
         margin-top: 15px;
    }
    .content{
        font-size: 15px;
        color: #5E5856;
        margin-top: 10px;
    }
    .container-button{
        margin-top:60px;
        .button {
            width: 180px;
            height: 35px;
        }
    }
}
</style>
